mount()

#mount() | 来源: 网络整理| 查看: 265

# mount()

参数：

{Component} component {Object} options

返回值： {Wrapper}

选项：

移步选项

用法：

创建一个包含被挂载和渲染的 Vue 组件的 Wrapper。

Without options:

import { mount } from '@vue/test-utils' import Foo from './Foo.vue' describe('Foo', () => { it('renders a div', () => { const wrapper = mount(Foo) expect(wrapper.contains('div')).toBe(true) }) })

使用 Vue 选项：

import { mount } from '@vue/test-utils' import Foo from './Foo.vue' describe('Foo', () => { it('renders a div', () => { const wrapper = mount(Foo, { propsData: { color: 'red' } }) expect(wrapper.props().color).toBe('red') }) })

固定在 DOM 上：

import { mount } from '@vue/test-utils' import Foo from './Foo.vue' describe('Foo', () => { it('renders a div', () => { const div = document.createElement('div') document.body.appendChild(div) const wrapper = mount(Foo, { attachTo: div }) expect(wrapper.contains('div')).toBe(true) wrapper.destroy() }) })

默认插槽和具名插槽：

import { mount } from '@vue/test-utils' import Foo from './Foo.vue' import Bar from './Bar.vue' import FooBar from './FooBar.vue' describe('Foo', () => { it('renders a div', () => { const wrapper = mount(Foo, { slots: { default: [Bar, FooBar], fooBar: FooBar, // 将匹配 ``。 foo: '' } }) expect(wrapper.contains('div')).toBe(true) }) })

将全局属性存根：

import { mount } from '@vue/test-utils' import Foo from './Foo.vue' describe('Foo', () => { it('renders a div', () => { const $route = { path: 'http://www.example-path.com' } const wrapper = mount(Foo, { mocks: { $route } }) expect(wrapper.vm.$route.path).toBe($route.path) }) })

将组件存根：

import { mount } from '@vue/test-utils' import Foo from './Foo.vue' import Bar from './Bar.vue' import Faz from './Faz.vue' describe('Foo', () => { it('renders a div', () => { const wrapper = mount(Foo, { stubs: { BarFoo: true, FooBar: Faz, Bar: { template: '' } } }) expect(wrapper.contains('.stubbed')).toBe(true) expect(wrapper.contains(Bar)).toBe(true) }) })

废弃通知：

当对组件存根时，提供一个字符串的方式 (ComponentToStub: ') 已经不再被支持。